<template>
    <view class="login-container">
        <view class="title">
            <image src="/static/imgs/assets/lanqiao-logo.svg" style="width:200px;height:200px"></image>
        </view>
        <input 
            type="text" 
            v-model="phone" 
            placeholder="请输入电话号码" 
            class="input-field" 
        />
        <input 
            type="password" 
            v-model="password" 
            placeholder="请输入密码" 
            class="input-field" 
        />
        <button @click="login" class="login-button">登录</button>
        <view class="register-link" @click="goToRegister">注册</view>
    </view>
</template>

<script>
	import  config  from '@/config'
export default {
    data() {
        return {
            phone: '',
            password: ''
        };
    },
    methods: {
        login() {
            if (!this.phone ||!this.password) {
                uni.showToast({
                    title: '用户名和密码不能为空',
                    icon: 'none'
                });
                return;
            }
            // 实际开发中，可添加向服务器发送登录请求的代码
            // 示例：
            uni.request({
                url: config.API_HOST+`/login?phone=${this.phone}`,
                success: (res) => {
                    console.log(res.data);
                    if (res.data.length > 0) {
                        // 确保从服务器获取的密码和用户输入的密码都是字符串类型再进行比较
                        const serverPassword = String(res.data[0].password);
                        const userPassword = String(this.password);
                        if (serverPassword === userPassword) {
                            // 存储个人信息
                            uni.setStorageSync('loginUserInfo', JSON.stringify(res.data[0]));
                            // 假设服务器返回的 token 是 res.data[0].token，根据实际情况修改
                            const token = res.data[0].token; 
                            uni.setStorageSync('token', token);
                            
                            uni.showToast({
                                title: '登录成功',
                                icon:'success',
                            });
							setTimeout(() => {
							    uni.switchTab({
							    url: '/pages/index/index' 
							    });
							}, 3000);
							
                        } else {
                            uni.showToast({
                                title: '密码错误',
                                icon: 'error'
                            });
                        }
                    } else {
                        uni.showToast({
                            title: '用户不存在',
                            icon: 'error'
                        });
                    }
                }
            });
        },
        goToRegister() {
            uni.navigateTo({
                url: '/pages/register/index' 
            });
        }
    }
};
</script>

<style scoped>
.login-container {
    padding: 0 30px;
}

.title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}

.input-field {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 20px;
}

.login-button {
    background-color: #007aff;
    color: white;
    border-radius: 5px;
    text-align: center;
    width: 50%;
    height: 50px;
    line-height: 50px;
}

.register-link {
    font-size: 16px;
    color: blue;
    text-decoration: underline;
    text-align: center;
    margin-top: 20px;
    cursor: pointer;
}
</style>